<template>
  <div>
    <div v-if="seen">当前变量的值：{{ seen }}</div>
    <div v-else>当前变量的值：{{ seen }}</div>
    <button @click="changeSeen">改变变量</button>

    <div v-if="seen1 == 1">当前变量的值：{{ seen1 }}</div>
    <div v-else-if="seen1 == 2">当前变量的值：{{ seen1 }}</div>
    <div v-else>当前变量的值：other</div>
    <input type="text" v-model="seen1" />

    <br />
    <div v-show="seen2">显示隐藏</div>
    <br />
    <button @click="changeSeen2">change</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      seen: true,
      seen1: 1,
      seen2: true,
    };
  },
  methods: {
    changeSeen() {
      this.seen = !this.seen;
    },
    changeSeen2() {
      this.seen2 = !this.seen2;
    },
  },
};
</script>